import { useState, useEffect, useImperativeHandle } from "react";
import { Button, Form, Input, InputNumber, Select, Space, Tooltip, Typography, Row, Col } from "antd";
import { TagFilled } from "@ant-design/icons";
import { useFetch } from 'hooks/useFetch';
import { listAll } from 'api/DriverManagerApi';

const formItemLayout = {
  labelCol: { span: 3 },
  wrapperCol: { span: 16 },
};

const DsForm = ({ ref }) => {

  const [form] = Form.useForm();

  // 将获取表单数据的方法暴露给父组件
  useImperativeHandle(ref, () => ({
    form,
  }))

  const { data: driverLibs } = useFetch(listAll);
  return (
    <Form
      form={form}
      {...formItemLayout}
      layout="horizontal"
    >
      <Form.Item
        name="name"
        label="名称"
        rules={[
          { required: true, message: '请输入数据源名称' },
          { min: 2, message: '名称至少2个字符' },
        ]}
      >
        <Input placeholder="请输入数据源名称" />
      </Form.Item>

      <Form.Item
        name="driverId"
        label="驱动包"
        rules={[
          { required: true, message: '请选择驱动包' },
          { type: 'string', message: '' },
        ]}
      >
        <Select
          options={driverLibs}
          fieldNames={
            {
              label: 'viewName',
              value: 'id'
            }
          }
          placeholder="请选择驱动包"
        />
      </Form.Item>

      <Form.Item
        name="host"
        label="主机"
        rules={[
          { required: true, message: '请输入主机' }
        ]}
      >
        <Input placeholder="请输入主机" />
      </Form.Item>

      <Form.Item
        name="port"
        label="端口"
        rules={[
          { required: true, message: '请输入端口' }
        ]}
      >
        <Input placeholder="请输入端口" />
      </Form.Item>

      <Form.Item
        name="username"
        label="用户名"
        rules={[
          { required: true, message: '请输入用户名' }
        ]}
      >
        <Input placeholder="请输入用户名" />
      </Form.Item>

      <Form.Item label="密码" name="password" rules={[{ required: true, message: '请输入密码' }]} >
        <Row gutter={8}>
          <Col span={22}>
            <Form.Item
              noStyle
            >
              <Input.Password placeholder="请输入密码" autoComplete="off" />
            </Form.Item>
          </Col>
          <Col span={2} style={{ display: 'flex', alignItems: 'center' }} >
            <Tooltip title="从密码簿中查找">
              <TagFilled style={{ color: '#1677ff', cursor: 'pointer' }} />
            </Tooltip>
          </Col>
        </Row>
      </Form.Item>

      <Form.Item
        name="dbName"
        label="数据库"
      >
        <Input placeholder="请输入数据库" />
      </Form.Item>

      <Form.Item
        name="schema"
        label="schema"
      >
        <Input placeholder="请输入schema" />
      </Form.Item>

    </Form>
  )
}

export default DsForm;